<template>
  <div class="sampleIndexPage">
    <userHeader />
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}">   <a class="bread1">当前位置：首页  >  </a></router-link>
          <router-link :to="{path:'/comment'}">  <a class="bread2">内控评价 ></a></router-link>
          <a class="bread2">样本为0评价点列表 </a>
      </span>
    </div>
    <div class="navList">
      <div class="sp1" style="background: #8cc34b" v-clickoutside="clickhideul">
        <span @click.stop="choiseTyoe">{{categyType}}</span>
        <ul class="hideUl" v-if="hideUl&&evaplantype_list">
          <li @click.stop="selectType(item.evaplan_type_name,item.evaplan_type_id)" v-for="(item,index) in evaplantype_list" :key="index">
            <span>{{item.evaplan_type_name}}</span>
          </li>
          <li v-if="evaplantype_list.length==0">
            暂无数据
          </li>
        </ul>
      </div>
        <!--<span  @click.stop="editor">-->
      <!--编辑-->
      <!--</span>-->
      <!--<span  @click.stop="editor" class="sampleEditor">-->
      <!--编辑-->
      <!--</span>-->
      <!--<span @click.stop="saveBtn" class="sampleSave">-->
      <!--保存-->
      <!--</span>-->
    </div>
    <el-table
      :row-class-name="tableRowClassName2"
      :cell-class-name="cell"
      :row-style="showRow"
      ref="tableData3"
      current-row-key
      :data="formatData2"
      :height="height"
      style="width: 100%"
    >
      <el-table-column
        prop="process_num"
        label="项目编号"
        fixed
        width="125">
      </el-table-column>
      <el-table-column
        prop="process_num"
        fixed
        label="评价点"
        width="195">
        <template slot-scope="scope">
            <div >
                 <span>{{commentPoint(scope.row)}}</span>
            </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="process_level"
        label="级别"
        width="85">
      </el-table-column>
      <el-table-column label="流程目录"
                       :render-header="renderHeaderOne"
                       class="e-table-cloumnAll">
        <el-table-column
          prop="first_process"
          label="一级流程"
          width="170">
          <template slot-scope="scope" >
              <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.first_process.process_name class="lc-text">
                      <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                      <img src="../../static/images/reduce.png" alt="" v-else>
                <span>{{scope.row.first_process.process_name}}</span>
              </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="second_process"
          label="二级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.second_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
               <span>{{scope.row.second_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="third_process"
          label="三级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.third_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
               <span>{{scope.row.third_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fourth_process"
          label="四级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.fourth_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
                  <span>{{scope.row.fourth_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fifth_process"
          label="五级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.fifth_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
              <span>{{scope.row.fifth_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column
        label="形成原因"
        :render-header="renderHeaderTwo"
        width="145">
        <template slot-scope="scope">
          <div v-if="scope.row.sample0record">
            {{scope.row.sample0record.sample_0_reason}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="应形成样本名称"
        >
        <template slot-scope="scope" >
          <div v-if="scope.row.sample0record">
            {{scope.row.sample0record.should_form_sample_name}}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="未形成记录原因"
        >
        <template slot-scope="scope">
          <div  v-if="scope.row.sample0record">
          {{scope.row.sample0record.no_record_reason}}
          </div>
        </template>
      </el-table-column>


      <!--   prop="sample0record.auditing_state"-->
      <el-table-column
        label="审核"
        width="65">
        <template slot-scope="scope">
          <div v-if="scope.row.sample0record">
            <div >
              <p  >
                  <span @click.stop="toggleAdpaIdentify(scope.$index,1,scope.row)">
                     <b :class="{'e-wrong':true,'e-wrong-active': scope.row.sample0record.auditing_state === '2' }"></b>
                    <!--<b class="e-wrong-disActive e-wrong " v-else></b>-->
                  </span>
                <span @click.stop="toggleAdpaIdentify(scope.$index,2,scope.row)">
                        <b :class="{'e-right-active':scope.row.sample0record.auditing_state === '1', 'e-right':true}" ></b>
                  </span>
              </p>
            </div>
            <!--<div v-else>-->
              <!--<p >-->
                 <!--<span >-->
                     <!--<b :class="{'e-wrong':true,'e-wrong-active': scope.row.sample0record.auditing_state === '2' }"></b>-->
                  <!--</span>-->
                <!--<span >-->
                      <!--<b :class="{'e-right-active':scope.row.sample0record.auditing_state=== '1', 'e-right':true}" ></b>-->
                    <!--</span>-->

              <!--</p>-->
            <!--</div>-->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="审核人员"
        width="65">
        <template slot-scope="scope">
          <div v-if="scope.row.sample0record">
            {{scope.row.sample0record.real_name}}
          </div>
        </template>
      </el-table-column>

      <!--<el-table-column>-->

      <!--</el-table-column>-->
    </el-table>

  </div>
</template>
<script>
  import userHeader from '@/components/header.vue';
  import {mapState} from 'vuex';
  import treeToArray2 from '@/page/test/catalog.js'
  import treeToArray from '@/page/test/sub.js';
  import Clickoutside from 'element-ui/lib/utils/clickoutside';
  export default({
    directives: { Clickoutside },
    data (){
      return {
        tempId:"",
        show1:false,
        formLabelWidth:'160px',
        showFlag:false,
        tableData3: [],
        resason:'形成原因',
        disabled:true,
        evaplan_type_id:'',
        tempReason:[
          {
              value:1,
              name:'当期未发生'
          },{
            value:2,
            name:'未形成记录'
          }
        ],
        logLevel:'形成原因',
        company_list:[],
        hideUl:false,
        evaplantype_list:[],
        sample0record:[],
        hidecompany:false,
        categyType:'评价类型',
        cateCompany:'评价公司',
        status:[
          '待评价',
          '待审核',
          '已通过',
          '未通过'
        ]
      }
    },
    components:{
      userHeader,
    },
    methods:{
      saveBtn(){
          console.log(this.sample0record)
          this.axios.post('/api/v1/flow/sample0record',{
            sample0record:this.sample0record
          }).then((res)=>{
              console.log(res.data);
              this.$alert(res.data.message,'提示');
          })
      },
      toggleAdpaIdentify(index,flag,row){
          if(row.sample0record.bl_edit ==0){
            this.$alert('你不是当前审核人员','提示');
            return  false
          }else if(row.sample0record.bl_edit ==1){
            this.$alert('确定进行审核?','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              showCancelButton: true,
              callback:action=>{
                if(action=='confirm'){
                  this.formatData2.forEach((el,ind)=>{
                    if(index == ind ){
                      if(flag==1){
                        el.sample0record.auditing_state = "2";
                        if(this.sample0record.length){
                          for(var k in  this.sample0record){
                            if(this.sample0record[k].sa0re_id ===row.sample0record.sa0re_id){
                              this.sample0record[k]={
                                sa0re_id:row.sample0record.sa0re_id,
                                auditing_state:row.sample0record.auditing_state
                              }
                            }else{
                              this.sample0record.push({
                                sa0re_id:row.sample0record.sa0re_id,
                                auditing_state:row.sample0record.auditing_state
                              })
                            }
                          }
                        }else{
                          this.sample0record.push({
                            sa0re_id:row.sample0record.sa0re_id,
                            auditing_state:row.sample0record.auditing_state
                          })
                        }
                      }else{
                        el.sample0record.auditing_state = "1";
                        if(this.sample0record.length){
                          for(var k in  this.sample0record){
                            if(this.sample0record[k].sa0re_id ===row.sample0record.sa0re_id){
                              this.sample0record[k]={
                                sa0re_id:row.sample0record.sa0re_id,
                                auditing_state:row.sample0record.auditing_state
                              }
                            }else{
                              this.sample0record.push({
                                sa0re_id:row.sample0record.sa0re_id,
                                auditing_state:row.sample0record.auditing_state
                              })
                            }
                          }
                        }else{
                          this.sample0record.push({
                            sa0re_id:row.sample0record.sa0re_id,
                            auditing_state:row.sample0record.auditing_state
                          })
                        }
                      }
                    }
                  });
                  this.saveBtn();
                }
              }
            })
          }
//          this.$confirm('确定进行审核？','提示')

          console.log(row.sample0record.sa0re_id)


        console.log(index)
      },
      editor(){
        this.disabled =false;
      },
      renderHeaderTwo (h, {column, $index}) {
        //下拉框内容包裹在一个div里面
        return h('ul',[
          h('el-select',{//el-select实现下拉框
            on:{
              input: (value) => {//随着下拉框的不同，文字框里的内容在边
                this.logLevel = value;
//                for(var i in this.formatData2){
//                   if(this.formatData2[i].sample0record.sample_0_reason!=value){
//                     this.formatData2.splice(i,1);
//                   }
//                }
                this.getUserSample(this.logLevel);
              },
            },
            props:{
              value:this.logLevel,//文字框的内容取决于这个value，如果value不存在，会报错
            },
          },[
            this.tempReason.map(item => {
              return h("el-option", {
                props: {
                  value: item.value,
                  label: item.name
                }
              })
            })
          ])])
      },
      getUserSample(id){
        this.axios.get('/api/v1/flow/sample0record',{
            params:{
              sample_0_reason:id,
              evaplan_type_id:this.evaplan_type_id
            }
        }).then((res)=>{
            this.tableData3 =res.data.data;
        })
      },
      clickhideul(){
        this.hideUl=false;
      },
      clickhidecompany(){
        this.hidecompany=false;
      },
      choiseTyoe(){
        this.hideUl =!this.hideUl;
      },
      choiseCompany(){
        this.hidecompany =!this.hidecompany;
      },
      //单选ul
      selectType(name,id){
        console.log(name,id)
        this.categyType = name;
        this.hideUl =false;
        this.evaplan_type_id =id;
        this.getProgressTest(id);
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)',
          target: document.querySelector('.el-table')
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      },
      //获取评价类型列表
      getComentTypeList(id){
        this.axios.get('/api/v1/flow/evaplantype',
          {
            params:{
              company_id:id||this.company_id,
              limit:10,
              page:1
            }
          })
          .then((res)=>{
            if(res.data.code==0){
              console.log(res.data.data);
              this.evaplantype_list =res.data.data;
              if(this.evaplantype_list.length){
                this.categyType =this.evaplantype_list[0].evaplan_type_name;
                this.getProgressTest(this.evaplantype_list[0].evaplan_type_id);
              }else{
                this.categyType='暂无数据';
                this.tableData3 =[]
              }
            }
          })
      },


      tableRowClassName2 ({row, rowIndex}) {
        //把每一行的索引放进row
        row.index = rowIndex;
        console.log(row);
        if(row.sample0record){
          if(row.sample0record.bl_edit==1){
              return 'is-editor'
          }else if(row.sample0record.bl_edit==0){
            return 'no-editor'
          }
        }

      },
      showRow: function(row) {
        const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
        row.row._show = show
        return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
      },
      // 切换下级是否展开
      toggleExpanded: function(trIndex) {
        const record = this.formatData2[trIndex]
        record._expanded = !record._expanded
      },
      // 图标显示
      iconShow(index, record) {
        return ( record.son_process && record.son_process.length > 0)
      },
      cancelAdd(){
        this.form ={}
        this.dialogFormVisible =false
      },
      openData(){
        console.log(123)
      },
      //添加流程
      addCatelogo(){
        this.dialogFormVisible =true
      },
      choiseCheck(row){
//          console.log(selection,row)
      },
      cell({row, column, rowIndex, columnIndex}) {
        //第八列添加 red 类
        if(columnIndex==0){
          return "first-table-clouum"
        }
        if(columnIndex==1){
          return "second-table-clouum"
        }
        if(columnIndex==7||columnIndex==3 ||columnIndex==4||columnIndex==5||columnIndex==6){
          return "e-table-align-left"
        }
        if(columnIndex == 11){
          return 'walk_through'
        }
        if(columnIndex==13||columnIndex==14||columnIndex ==12){
          return 'commentPerson'
        };
        if(columnIndex==8){
          return 'formreason'
        };
        if(columnIndex==16){
          return 'commentState'
        };
        if(columnIndex==17){
          return 'shenheState'
        }
//        //某一行其中的一个变量applies值如果大于0，并且在第六列，即确定一个具体的单元格需要确定行和列
//        if(parseFloat(row.applies) >0 && columnIndex == 5){
//          return 'red'
//        }
      },
      renderHeaderOne (h, {column, $index}) {
        return h('span', [
          h('span', column.label),
          h('span', {
            class: 'addIcon',
            on: {
              click: () => {
//                console.log(`${column.label}   ${$index}`)
                for(var i in this.formatData2){
                  this.formatData2[i]._expanded=!this.formatData2[i]._expanded
                }
              }
            }
          })
        ])
      },
      getProgressTest(id){
        this.axios.get('/api/v1/flow/sample0record/'+`${id}`)
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
              this.tableData3 =res.data.data
            }
          })
      },
      initData(){
//          this.axios.get('/api/v1/flow/evaluationplan')
        this.axios.get('/api/v1/flow/comanyevaplantype',{
            params:{
              page_type:1
            }
        })
          .then((res)=>{
            if(res.data.code==0){
              this.evaplantype_list=(res.data.data.evaplantype_list);
                if(this.tempId){
                  this.getProgressTest(this.tempId);
                }else{
                  if(this.evaplantype_list&&this.evaplantype_list.length){
                    this.categyType =this.evaplantype_list[0].evaplan_type_name;
//                      alert(this.evaplantype_list[0].evaplan_type_name);
                    this.getProgressTest(this.evaplantype_list[0].evaplan_type_id);
                  }else{
                    this.categyType='暂无数据';
                    this.tableData3 =[];
                    this.loading =false;
                  }
                }
              console.log(res.data.data);
              this.cateCompany =this.company_name;
            }
          })

      },
      formatCompany(data) {
        let tmp;
        if (!Array.isArray(data)) {
          tmp = [data]
        } else {
          tmp = data;
        }
        const func = this.evalFunc || treeToArray
        const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
        console.log(func.apply(null, args))
        return func.apply(null, args)
      },
      upDateState(id){
        this.axios.put('/api/v1/accout/usermessage/'+`${id}`)
          .then((res)=>{
            console.log(res)
          })
      }
    },
    computed:{
      ...mapState({
        company_id:state =>state.app.loginState.company_id||sessionStorage.getItem('company_id'),
        company_name:state=>state.app.loginState.company_name||sessionStorage.getItem('company_name'),
        company_pid:state=>state.app.loginState.company_pid||sessionStorage.getItem('company_pid'),
        user_id:state=>state.app.loginState.user_id||sessionStorage.getItem('user_id'),
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
      commentPoint(){
        return function (row) {
          if(row.first_process.process_name){
              return  row.first_process.process_name
          }else if(row.second_process.process_name){
            return  row.second_process.process_name
          }else if(row.third_process.process_name){
            return  row.third_process.process_name
          }else if(row.fourth_process.process_name){
            return  row.fourth_process.process_name
          }else if(row.fifth_process.process_name){
            return  row.fifth_process.process_name
          }
        }
      },
      formatData2: function() {
        let tmp;
        if (!Array.isArray(this.tableData3)) {
          tmp = [this.tableData3]
        } else {
          tmp = this.tableData3
        }
        const func = this.evalFunc || treeToArray2
        const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
        console.log(args)
        console.log(func.apply(null, args))
        return func.apply(null, args)
      },
      getReason(){
          return function (id) {
              if(id==1){
                return tempReason[id]
              }else if(id==2){
                return tempReason[id]
              }
          }
      }
    },
    mounted(){
      if(this.$route.query.evaluationplanTypeId){
          this.tempId =this.$route.query.evaluationplanTypeId;
          this.categyType =this.$route.query.evaluationplanTypeName;
          console.log(this.tempId);
          console.log( this.categyType);
      }
      this.initData();
    }
  })
</script>
<style  scoped="">
  .sampleIndexPage{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
  .sampleIndexPage .el-table >>> tr.is-editor{
    /*background: #8bc34a;*/
  }

  .sampleIndexPage .el-table >>> tr.is-editor .second-table-clouum{

  }

  .sampleIndexPage .el-table >>> tr.is-editor .second-table-clouum  .cell span{
    position: relative;
  }

  .sampleIndexPage .el-table >>> tr.is-editor .second-table-clouum  .cell span:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    background: red;
    position: absolute;
    left: -10px;
    top:50%;
    border-radius: 50%;
    margin-top: -2px;
   }
  /*.sampleIndexPage .el-table >>> tr.no-editor{*/
    /*background: green;*/
  /*}*/
  .sampleIndexPage .el-table >>> .has-gutter .addIcon{
    display: inline-block;
    width:17px;
    height: 15px;
    background: #afd682;
    margin-left: 6px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    background-image: url("../../static/images/add2.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .sampleIndexPage .el-table  >>>  .el-table__header .has-gutter th{
    text-align: center;
    background: #d3e9bb;
  }
  .sampleIndexPage  .el-table  >>>  .el-table__header .el-table-column--selection .el-checkbox{
    display: none;
  }
  .sampleIndexPage .el-table  >>> .el-table__fixed-right-patch{
    border-bottom: none;
  }
  .sampleIndexPage  .el-table  >>>  .el-table__header .has-gutter th .cell{
    color: #5d9120
  }
  .sampleIndexPage .el-dialog__wrapper >>>.el-dialog  .el-form-item__error{
    left:390px;
    top:50%;
    -webkit-transform: transLateY(-50%);
    -moz-transform: transLateY(-50%);
    -ms-transform: transLateY(-50%);
    -o-transform: transLateY(-50%);
    transform: transLateY(-50%);
  }
  .sampleIndexPage .breadClum{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    background:#f1f1f1;

  }
  .sampleIndexPage .breadClum span{
    float: left;
    margin-left: 10px;
  }
  .sampleIndexPage .breadClum .bread1{
    color:#888888 ;
  }
  .sampleIndexPage .breadClum .bread2{
    color:#699f2b ;
  }
  .sampleIndexPage  .directionNav{
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 22px;
    color: #333333;
  }

  .sampleIndexPage  .navList .sp1 .hideUl{
    position: absolute;
    left: 0;
    top:60px;
    width: 160px;
    z-index: 999;
    background: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding-top: 6px;
    /*border: 1px solid #;*/
  }
  .sampleIndexPage  .navList .sp1 .hideUl:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 10px;
    left: 36px;
    top:-5px;
    margin-left: -2px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    background: white;
  }
  .sampleIndexPage  .navList .sp1 .hideUl li{
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    color: #fff;
    text-align: center;
    background: #8bc34a;
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
  .sampleIndexPage .navList{
    height: auto;
    border: none;
  }

  .sampleIndexPage .navList .is-editor{
      height: 20px;
      float: right;
      color: #333;
      font-size: 14px;
     text-align: center;
      margin-right: 30px;
    margin-top: 20px;
  }
  .sampleIndexPage .navList .is-editor .color-block{
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #8bc34a;
    vertical-align: middle;
  }
  .sampleIndexPage .navList .is-editor .color-text{
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
  }
  .sampleIndexPage .navList  .sp1{
    background: #8bc34a;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 14px;
    color: white;
    margin-right: 7px;
    position: relative;
    height: 40px;
    padding: 0;
    padding-right: 30px;
    line-height: 40px;
    float: left;
    margin-bottom: 10px;
  }
  .sampleIndexPage .navList  .sp3{
    background: #8bc34a;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 14px;
    color: white;
    margin-right: 7px;
    position: relative;
    height: 40px;
    padding: 0;
    line-height: 40px;
    float: left;
    margin-bottom: 10px;
    padding: 0 10px;
  }
  .sampleIndexPage .navList .sp1{
    margin-left: 10px;
  }
  .sampleIndexPage .navList span.green{
    background: #769dd6;
  }
  .sampleIndexPage .navList span.dark{
    background: #f0ba14;
  }

  .sampleIndexPage .el-table  >>>  th.is-leaf{
    background: #d3e9bb;
    height:58px;
  }
  .sampleIndexPage  .el-table  >>> thead  th.is-leaf .cell{
    font-size: 14px;
    color: #5d9120;
    font-weight: normal;
    text-align: center;
  }
  .sampleIndexPage .el-table  >>> tr  th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .sampleIndexPage .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
  .sampleIndexPage .el-table  >>> .el-table__body-wrapper  .el-table__body  .el-table__row .cell{
    /*text-align: center;*/
  }
  .sampleIndexPage  .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td{
    /*height: 50px;*/
    border-right: 1px solid #aac983;
  }
  .sampleIndexPage .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
  .sampleIndexPage  .el-table td, .el-table th{
    padding: 10px 0;
  }
  .sampleIndexPage  .el-table thead.is-group th{
    background: #d3e8ba !important;;
  }
  .sampleIndexPage .el-table thead.is-group th.is-leaf{
    background: #e9f4dc !important;;
    border-bottom: 1px solid #e7e7e7 !important;;
  }

  .sampleIndexPage  .el-table th>.cell{
    text-align: center;
    color:#5d9120;
    font-size: 18px;
    font-weight: normal;
  }

  .sampleIndexPage .el-table .cell{
    text-align: center;
  }

  .sampleIndexPage .el-table thead .el-checkbox__inner{
    width: 0;
    height: 0;
  }
  .sampleIndexPage .el-checkbox__inner{
    width: 22px !important;
    height: 22px !important;
  }
  .sampleIndexPage .el-checkbox__input.is-checked .el-checkbox__inner, .sampleIndexPage .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #8bc34a !important;
    border-color: #8bc34a !important;;
  }
  .sampleIndexPage .el-checkbox__inner::after{
    left: 6px !important;
    position: absolute;
    top: 2px !important;
    height: 12px !important;
    width: 6px !important;
  }

  .sampleIndexPage tbody,tr:nth-child(even){
    background: #f8f8f8 !important;
  }

  .sampleIndexPage .breadClum .page1 a,.breadClum .page2 a{
    color: #333;
    text-decoration: none;
    margin-left: 30px;
  }
  .sampleIndexPage >>> .walk_through b,
  .sampleIndexPage >>> .commentPerson b{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #d5d5d5;
    border-color: #d5d5d5;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    -webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
  }
  .sampleIndexPage >>> .walk_through  b.e-right:after,
  .sampleIndexPage >>> .commentPerson b.e-check-rights:after
  {
    left: 3px;
    top:1px;
    width: 4px;
    height: 6px;
    -webkit-transform: rotate(45deg) scaleY(1);
    transform: rotate(45deg) scaleY(1);
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    position: absolute;
    -webkit-transition: -webkit-transform .15s ease-in .05s;
    transition: -webkit-transform .15s ease-in .05s;
    transition: transform .15s ease-in .05s;
    transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
    transition: transform .15s ease-in .05s,-webkit-transform .15s ease-in .05s;
    -webkit-transform-origin: center;
    transform-origin: center;
  }
  .sampleIndexPage >>> .walk_through b.e-right-active{
    background: #8bc34a;
    border-color: #8bc34a;
  }
  .sampleIndexPage >>>  .commentPerson .e-Active-check{
    background: #efbb10;
    border-color: #efbb10;
  }


  .sampleIndexPage >>> .walk_through b.e-wrong:after{
    content:'×';
    color: #fff;
    line-height: 14px;
    font-size: 10px;
    text-align: center;
    top:50%;
    transform: translateY(-50%);
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    left: 0;
    width: 100%;
  }
  .sampleIndexPage >>> .walk_through b.e-wrong-active{
    background: #f56c6c;
    border-color: #f56c6c;
  }

  .sampleIndexPage >>> .commentState span,
  .sampleIndexPage >>> .shenheState span{
    border: 1px solid #ccc;
    padding: 0 4px;
    border-radius: 2px;
    position: relative;
  }
  .sampleIndexPage >>> .commentState span.notice:after,
  .sampleIndexPage >>> .shenheState span.notice:after{
    position: absolute;
    right:0;
    top:-2px;
    width: 4px;
    height: 4px;
    content: '';
    background: red;
    border-radius: 50%;
    -moz-border-radius: 50%;

  }
  .sampleIndexPage >>> .commentState span.e-wait{
    background: #dddddd;
    border-color:#dddddd ;
    color: #b6b6b6;
  }
  .sampleIndexPage >>> .commentState span.e-shenheing{
    background: #ddd;
    border-color:#ddd ;
    color: #959595;
  }
  .sampleIndexPage >>> .shenheState span.e-shenheing{
    background: #fff;
    border-color: #d2d2d2;
    color:#d2d2d2 ;
  }



  .sampleIndexPage >>> .commentState span.e-pass{
    background: #8cc34b;
    border-color:#8cc34b ;
    color: white;
  }
  .sampleIndexPage >>> .shenheState span.e-pass{
    background:#8cc34b;
    border-color: #8cc34b;
    color:#fff ;
  }
  .sampleIndexPage >>> .commentState span.e-reject,
  .sampleIndexPage >>> .shenheState span.e-reject{
    background: #f66c6c;
    border-color:#f66c6c ;
    color: white;
  }
  .sampleIndexPage >>> .commentState span.e-wai,
  .sampleIndexPage >>> .shenheState span.e-wai{
    background: #fff;
    border-color:#dbdbdb ;
    color: #dbdbdb;
  }
  .sampleIndexPage >>> .navList .sp1{
    width: 90px;
  }
  .sampleIndexPage >>> .navList .sampleEditor{
    display: inline-block;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
}
  .sampleIndexPage >>> .navList .sampleSave{
    display: inline-block;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
  }
  .sampleIndexPage  .navList .sp1 span{
    position: relative;
    display: inline-block;
    width:90px;
    text-align: center;
    height: 100%;
    text-overflow: ellipsis;
  }
  .sampleIndexPage  .navList .sp1>span:after{
    position: absolute;
    right: -10px;
    top:50%;
    width:8px;
    height: 5px;
    margin-top: -3px;
    content:'';
    background-image: url("../../static/images/icon-down.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 5px;

  }

  .sampleIndexPage >>>  .el-table__body td.e-table-align-left .cell{
    padding-left: 6px;
    padding-right: 0;
    text-align: left;
  }
  .sampleIndexPage >>> .el-table__body td.e-table-align-left .cell .lc-text {
    overflow: hidden;
    width: 100%;
    position: relative;
  }
  .sampleIndexPage >>>  .el-table__body td.e-table-align-left .cell .lc-text img{
    cursor: pointer;
    position: absolute;
    top:1px;
  }
  .sampleIndexPage >>> .el-table .el-table__body td.e-table-align-left .cell .lc-text span{
    margin-left: 20px;
    text-align: left;
  }
  .sampleIndexPage >>> .el-table   thead  th.is-leaf .cell .el-select{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0;
  }
  .sampleIndexPage  >>>.el-table  thead  th.is-leaf .cell .el-select .el-input--suffix .el-input__inner{
    padding: 0;
    text-align: center;
    border: none;
    background-color: #d3e9bb;
    height: auto;
    line-height: 1;
    color: #5d9120;
  }
  .sampleIndexPage  >>>.el-table  thead  th.is-leaf .cell .el-input{
        padding: 0;
  }
  .sampleIndexPage >>>.el-table  th div.formreason{
      padding: 0;
  }
  .sampleIndexPage >>> .el-table   thead  th.is-leaf .cell .el-input .el-input__suffix{
    display: inline-block;
    width:17px;
    height: 15px;
    background: #afd682;
    top:50%;
    margin-top: -7px;
  }
  .sampleIndexPage  >>> .el-table   .formreason .cell{

  }
  .sampleIndexPage  >>> .el-table  thead  .cell  .el-select .el-input .el-select__caret{
    color: white;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
  }
  .sampleIndexPage >>> .el-table   thead  .cell .el-select .el-input .el-select__caret.is-reverse{
    transform: none;
    -webkit-transform: none;
    top:0;
    margin-top: -12px;
  }
  @media screen and (max-width: 1400px) {
    .sampleIndexPage{
      padding: 6px;
    }
  }
</style>
